<template>
  <div class="textInfo">
    <div class="text-wrap" v-for="(item, index) in reportItems" :key="item">
      <i class="fa fa-minus-circle" @click.stop="deleteReportItem(item)"></i>
      <div class="text-content">
        <div class="text-info-slot">
          <slot name="chooseItem" :data="index"></slot>
        </div>
        <x-textarea
          class="text"
          placeholder="点击输入内容"
          auto-height
          v-model="item.jobContent"
          :show-confirm-bar="false"
        ></x-textarea>
        <div class="note-wrap">
          <slot name="note" :data="index"></slot>
        </div>
      </div>
    </div>
    <div class="addItem" @click="addReportItem">
      <i class="fa fa-plus-circle" aria-hidden="true"></i>
      <div class="textDescription">{{ addPlaceHolder }}</div>
    </div>
  </div>
</template>

<script>
import { XInput, XTextarea, PopupRadio } from "vux";

export default {
  components: {
    XInput,
    XTextarea,
    PopupRadio,
  },
  props: {
    reportItems: {
      type: Object,
      default: [],
    },
    addPlaceHolder: {
      type: String,
      default: "添加汇报",
    },
  },
  data() {
    return {
      itemContent: "",
    };
  },
  watch: {
    reportItems: {
      handler() {
        this.$emit("update:reportItems", this.reportItems);
      },
      deep: true,
    },
  },
  methods: {
    deleteReportItem(item) {
      // 删除item,要保证删除后的item中的index对得上号
      const length = this.reportItems.length;
      for (let i = length - 1; i >= 0; --i) {
        let index = this.reportItems[i].index;
        if (item.index === index) {
          this.reportItems.splice(item.index, 1);
        } else if (item.index < index) {
          this.reportItems[i].index--;
        }
      }
    },
    addReportItem() {
      const temp = {
        index: this.reportItems.length,
        jobContent: "",
      };
      this.reportItems.push(temp);
    },
  },
};
</script>

<style lang='less'>
.textInfo {
  .text-wrap {
    display: flex;
    .fa-minus-circle {
      color: #ff5252;
      padding: 10px;
      font-size: 20px;
    }
    .text-content {
      width: calc(100% - 40px);
      border: 1px solid #c8c7cc;
      box-shadow: 0px 2px 3px #c8c7cc;
      border-radius: 10px;
      margin-bottom: 10px;
      .text-info-slot {
        display: flex;
        justify-content: space-between;
        padding-top: 10px;
      }
      .text {
        margin-top: 15px;
        padding-top: 15px;
        width: 80%;
        font-size: 14px;
        color: #3f536e;
      }
      .note-wrap {
        color: gray;
        text-align: right;
        margin: 5px;
      }
    }
  }
  .addItem {
    display: flex;
    line-height: 42px;
    .fa-plus-circle {
      color: #07c160;
      font-size: 20px;
      padding: 10px;
    }
    .textDescription {
    }
  }
}
</style>